<template>
	<view>
		<status-bar ref='statusbar' :title='tabTitle' back='0'></status-bar>
		<view class="viewbox auto m-top20">
			<view class="rows m-bot40" v-for="(item,index) in pageData" :key="index">
				<view class="rows title m-bot30" v-if="item.class_name">{{item.class_name}}</view>
				<view class="list" v-for="(subItem,subIndex) in item.list" :key="subIndex" @click="Toanswer(subItem)">
					<image :src="$imgUrls(subItem.wx_img)" mode="aspectFill" class="list_top_img"></image>
					<view class="row f-column padding20-24">
						<view class="size26 color_33 bold ellipsis">
							{{subItem.wx_title}}
						</view>

						<view class="row j-sb a-center">
							<text class="color_66 h7">共{{subItem.total_count}}题，每日{{subItem.day_count}}题</text>
							<view class="d-flex f-column">
								<text class="color_66 h7 schedule">总进度 {{subItem.percent}}%</text>
								<view class="progor m-top10">
									<view class="schPro" :style="{width:subItem.percent+'%'}"></view>
								</view>
							</view>
						</view>
						<text class="color_E6 h7" v-if="subItem.answer_type == 1">请在每日24时前完成答题</text>
						<text class="color_E6 h7" v-if="subItem.answer_type == 2">请在{{subItem.end_time}}前完成答题</text>
						<text class="color_E6 h7" v-if="subItem.answer_type == 3">共{{subItem.people_count}}人答题</text>
					</view>
				</view>
			</view>

			<empty v-if="!pageData.length"></empty>

		</view>
		<showModel @cancelFunc='showModal=false'  v-if='showModal' type='2'></showModel>
		<tabBar :tab="15"></tabBar>
	</view>
</template>
<!-- answer_type  类型  0：默认  1：每日必答 2：必学必答 3：选学选答 -->
<script>
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				showModal:false,
				pageData: [],
			}
		},
		onLoad() {
			this.actClassList();
		},

		methods: {
			actClassList() {
				this.$http.post({
					url: '/SRA_Standup2021/actClassList',
					data: {
						token: this.bid
					}
				}).then(res => {
					if (!res.success) return;
					const result = res.data || [];
					this.pageData = result;
				})
			},
			Toanswer(item) {
				if(!this.vid) return this.showModal = true;
				const gid = Object.keys(item.bankArr)[0];
				this.toUrl(`/answer/answer/answer?act_id=${item.sid}&gid=${gid}`)
			}
		},
		computed: {
			...mapState(['bid', 'tabTitle','vid']),
		},
		filters: {
			answer_timesTxt(Val) {
				const num = parseInt(Val);
				if (num == 1) return '请在每日24时前完成答题'
			}
		}
	}
</script>

<style lang="scss" scoped>
	.title {
		width: 100%;
		color: #222222;
		font-size: 38rpx;
		padding-left: 30rpx;
		position: relative;
	}

	.title::after {
		content: '';
		width: 8rpx;
		height: 34rpx;
		background: #E42417;
		position: absolute;
		left: 0;
		top: 50%;
		transform: translate(0, -50%);
	}

	.list {
		width: 100%;
		background-color: #ffffff;
		box-shadow: 0 10rpx 20rpx #e6e6e6;
		border-radius: 10rpx;
		overflow: hidden;
		margin-bottom: 30rpx;
	}

	.list_top_img {
		width: 100%;
		height: 200rpx;
	}

	.tip {
		border-radius: 8rpx;
		padding: 2rpx 4rpx;
		margin-right: 10rpx;
	}

	.tip_txt {
		color: #ffffff;
		font-size: 20rpx;
		zoom: 0.9;
	}

	.biStudy {
		background-color: #FFB346;
	}

	.xuanStudy {
		background-color: #43A0FF;
	}

	.progor {
		width: 110rpx;
		height: 10rpx;
		background: #E4E4E4;
		border-radius: 6rpx;
		position: relative;
		overflow: hidden;
	}

	.schPro {
		height: 100%;
		background-color: #FF5255;
		position: absolute;
		top: 0;
		left: 0;
	}
</style>